<template>
  <div id="touchLog" @touchstart='touchstartMsg' @touchmove='touchmoveMsg' @touchend='touchendMsg'> 这里显示 touch 信息</div>
</template> 


<script>
export default {
  name: "tabs",
  data() {
    return {};
  },
  methods: {
    touchstartMsg(ev) {
    console.log(ev.touches);
     console.log(ev.targetTouches);
     console.log(ev.changedTouches);
     console.log(ev.touches[0].clientX);

    },
    touchmoveMsg(ev) {
    //   alert(ev.touches[0].clientX);
    //   alert(ev.targetTouches);
    //   alert(ev.changedTouches);
    //alert(ev.touches[0].clientX);
     //alert(2);
    },
    touchendMsg(ev) {
    //   alert(ev.touches[0].clientX);
    //   alert(ev.targetTouches);
    //   alert(ev.changedTouches);
    //alert(ev.touches[0].clientX);
    //  alert(3);
    },
  }
};
</script>

<style>
#touchLog {
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  height: 300px;
  background-color:blue
}
</style>